<template>
    <div class="content">
        <div class="house">
            <img class="hd-img-responsive" src="../../../../assets/images/jubao.png"/>
            <!--            <div>-->
            <!--                <van-cell title="投诉类型" is-link arrow-direction="down" :value="lx_id_name" @click="find"/>-->
            <!--            </div>-->
            <!--            <van-action-sheet v-model="showPicker" :actions="problem" cancel-text="取消" @select="select"/>-->
            <!--            <van-field-->
            <!--                    v-model="content"-->
            <!--                    type="number"-->
            <!--                    label="身份证号："-->
            <!--                    placeholder="请输入身份证号"-->
            <!--            />-->
            <van-tabs v-model="active" @change="tabChange">
                <van-tab title="举报疫情信息">
                    <van-field
                            v-model="nick_name"
                            label="举报人："
                            type="text"
                            @focus="bodyScrollTop"
                            placeholder="请输入联系姓名"
                            class="suggest"
                    />
                    <van-field
                            v-model="tel"
                            type="number"
                            @focus="bodyScrollTop"
                            label="联系电话："
                            placeholder="请输入联系电话"
                    />
                    <van-field
                            v-model="title"
                            label="举报主题："
                            type="text"
                            @focus="bodyScrollTop"
                            placeholder="请输入举报主题"
                            class="suggest"
                    />
                    <van-field
                            v-model="content"
                            label="举报内容："
                            @focus="bodyScrollTop"
                            type="textarea"
                            placeholder="请输入举报内容"
                            class="suggest"
                    />
                    <!--      <div class="suggest van-cell van-field van-field&#45;&#45;min-height">
                              <div class="van-cell__title van-field__label">
                                  <span>举报证据：</span>
                              </div>
                              <div class="van-cell__value">
                                  <div class="van-field__body">
                                      <van-uploader
                                              multiple
                                              v-model="fileList"
                                              preview-size="100px"
                                              :after-read="afterRead1"
                                              :max-count="1"
                                      />
                                  </div>
                              </div>
                          </div>-->
                </van-tab>
                <van-tab title="投诉政府部门">
                    <van-field
                            v-model="nick_name"
                            label="投诉人："
                            type="text"
                            @focus="bodyScrollTop"
                            placeholder="请输
                            入联系姓名"
                            class="suggest"
                    />
                    <van-field
                            v-model="tel"
                            type="number"
                            @focus="bodyScrollTop"
                            label="联系电话："
                            placeholder="请输入联系电话"
                    />
                    <van-field
                            v-model="title"
                            label="投诉主题："
                            type="text"
                            @focus="bodyScrollTop"
                            placeholder="请输入举报主题"
                            class="suggest"
                    />
                    <van-field
                            v-model="content"
                            label="投诉内容："
                            type="textarea"
                            @focus="bodyScrollTop"
                            placeholder="请输入举报内容"
                            class="suggest"
                    />
                    <!--       <div class="suggest van-cell van-field van-field&#45;&#45;min-height">
                               <div class="van-cell__title van-field__label">
                                   <span>投诉证据：</span>
                               </div>
                               <div class="van-cell__value">
                                   <div class="van-field__body">
                                       <van-uploader
                                               multiple
                                               v-model="fileList"
                                               preview-size="100px"
                                               :after-read="afterRead1"
                                               :max-count="1"
                                       />
                                   </div>
                               </div>
                           </div>-->
                </van-tab>
                <van-tab title="投诉不良企业">
                    <van-field
                            v-model="nick_name"
                            label="投诉人："
                            type="text"
                            @focus="bodyScrollTop"
                            placeholder="请输入联系姓名"
                            class="suggest"
                    />
                    <van-field
                            v-model="tel"
                            type="number"
                            @focus="bodyScrollTop"
                            label="联系电话："
                            placeholder="请输入联系电话"
                    />
                    <van-field
                            v-model="title"
                            label="投诉主题："
                            type="text"
                            @focus="bodyScrollTop"
                            placeholder="请输入举报主题"
                            class="suggest"
                    />
                    <van-field
                            v-model="content"
                            label="投诉内容："
                            type="textarea"
                            @focus="bodyScrollTop"
                            placeholder="请输入举报内容"
                            class="suggest"
                    />
                    <!--    <div class="suggest van-cell van-field van-field&#45;&#45;min-height">
                            <div class="van-cell__title van-field__label">
                                <span>投诉证据：</span>
                            </div>
                            <div class="van-cell__value">
                                <div class="van-field__body">
                                    <van-uploader
                                            multiple
                                            v-model="fileList"
                                            preview-size="100px"
                                            :after-read="afterRead1"
                                            :max-count="1"
                                    />
                                </div>
                            </div>
                        </div>-->
                </van-tab>
            </van-tabs>
            <div class="div-bot">
                <div class="city-card-common-btn" @click="submit">提交</div>
            </div>
            <van-dialog
                    use-slot
                    title=""
                    v-model="show"
                    show-cancel-button
                    confirm-button-open-type="getUserInfo"
            >
                <div>
                    <span>
                        您提交的信息已成功提交，稍后工作人员会与您取得联系，请您耐心等候
                    </span>
                </div>
            </van-dialog>
        </div>
    </div>
</template>

<script>
import { createFilePostServicecreatePost } from '@/api/mine'
import { Dialog } from 'vant'
import { objectToOss } from '@/api/wx-api'
import { getOpenidMsg } from '@/api/yi-qing-fang-kong.js'

export default {
  name: 'index.vue',
  data () {
    return {
      active: '0',
      fileList: [],
      lx_id_name: '',
      nick_name: '',
      idcard: '',
      tel: '',
      title: '',
      content: '',
      suggest: '',
      showPicker: false,
      show: false,
      img1: '',
      problem: [
        {
          name: '投诉',
          value: '1'
        },
        {
          name: '咨询',
          value: '2'
        },
        {
          name: '求助',
          value: '4'
        }
      ]
    }
  },
  methods: {
    // 苹果去白边
    bodyScrollTop () {
      winToTop()
      // this.setStorage(this.formItem)
    },
    tabChange (val) {
      console.log(val, '改变的值')
      // this.nick_name = ''
      // this.tel = ''
      this.title = ''
      this.content = ''
    },
    afterRead1 (file) {
      let data = {}
      let aaa = ''
      if (file.length !== undefined) {
        file.forEach((item, index) => {
          data = {
            base64: item.content.slice(22)
          }
          objectToOss(data).then(ret => {
            aaa += ret.data.result + ','
            this.img1 = aaa
          })
        })
      } else {
        data = {
          base64: file.content.slice(22)
        }
        objectToOss(data).then(ret => {
          aaa += ret.data.result + ','
          this.img1 = aaa
        })
      }
    },
    find () {
      this.showPicker = true
    },
    select (item) {
      console.log(item.name + '~' + item.value)
      this.lx_id = item.value
      this.lx_id_name = item.name
      this.showPicker = false
    },
    submit () {
      if ((this.nick_name !== '' && this.nick_name !== null && this.nick_name !== undefined) &&
          (this.tel !== '' && this.tel !== null && this.tel !== undefined) &&
          (this.title !== '' && this.title !== null && this.title !== undefined) &&
          (this.content !== '' && this.content !== null && this.content !== undefined)) {
        let data = {
          //  lx_id枚举类型【1投诉2咨询(建议)4求助】
          //  此处默认1
          lx_id: '1',
          nick_name: this.nick_name,
          tel: this.tel,
          content: this.content
        }
        if (this.active === 0) {
          data.title = '【举报疫情信息】' + this.title
        }
        if (this.active === 1) {
          data.title = '【投诉政府部门】' + this.title
        }
        if (this.active === 2) {
          data.title = '【投诉不良企业】' + this.title
        }
        createFilePostServicecreatePost(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.show = true
            // this.nick_name = ''
            // this.tel = ''
            // this.title = ''
            // this.content = ''
          } else {
            /*   Toast.fail(ret.data.errmsg) */
            Dialog.alert({
              message: ret.data.errmsg
            }).then(() => {
              // on close
            })
            return false
          }
        })
      } else {
        Dialog.alert({
          message: '输入内容不能为空'
        }).then(() => {
          // on close
        })
      }
    }
  },
  mounted () {
    getOpenidMsg().then(ret => {
      if (ret.data.errcode === 0) {
        console.log('获取注册过的人员信息', ret.data)
        this.nick_name = ret.data.data.result.name
        this.tel = ret.data.data.result.tel
      } else {
        this.failNotice(ret.data.errmsg)
      }
    })
  }
}
</script>

<style scoped>
    .find {
        border-radius: 25px;
        background-color: #996666;
        color: white;
        margin-top: 15px;
        height: 33px;
        line-height: 1px;
        margin-left: 2%;
        width: 96%;
    }

    .content {
        width: 100%;
        height: 100%;
        background-color: #F5F5F5;
    }

    .content >>> .van-cell {
        margin-top: 2%;
        margin-left: 2%;
        width: 96%;
        font-size: 12px;
    }

    .content >>> .van-dialog__content {
        padding: 10px;
        text-indent: 30px;
    }

    .van-field__control {
        font-size: 12px;
    }

    .content >>> .van-cell__value .van-field__body .van-field__control {
        font-size: 12px;
    }

    .city-card-common-btn {
        color: white;
        font-size: 12px;
        padding: 10px 0;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        background-color: #996666;
    }

    .div-bot {
        padding: 8px;
    }

    .content >>> .van-cell__value {
        flex: inherit;
        font-size: 12px;
    }

    .van-action-sheet__cancel, .van-action-sheet__item {
        font-size: 12px;
    }
</style>
